import React from 'react'
import { cardStyles } from './ReusableStyles'
import styled from 'styled-components'
import { BsFillCalendar2WeekFill } from 'react-icons/bs'
import { IoStatsChart } from 'react-icons/io5'
import { BiGroup } from 'react-icons/bi'
import { FiActivity } from 'react-icons/fi'
export default function Analytics() {
  return (
    <Section>
      <div className='analytic'>
        <div className='logo'>
          <BsFillCalendar2WeekFill />
        </div>
        <div className='content'>
          <h5>本月消费</h5>
          <h2>￥434.2</h2>
        </div>
      </div>
      <div className='analytic'>
        <div className='logo'>
          <IoStatsChart />
        </div>
        <div className='content'>
          <h5>本月收入</h5>
          <h2>￥10039.8</h2>
        </div>
      </div>
      <div className='analytic'>
        <div className='logo'>
          <BiGroup />
        </div>
        <div className='content'>
          <h5>新增关注</h5>
          <h2>107</h2>
        </div>
      </div>
      <div className='analytic'>
        <div className='logo'>
          <FiActivity />
        </div>
        <div className='content'>
          <h5>活动资金</h5>
          <h2>￥4265.8</h2>
        </div>
      </div>
    </Section>
  )
}

const Section = styled.section`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  .analytic {
    ${cardStyles}
    padding: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: all 0.5s ease-in-out;
    &:hover {
      background-color: #ffc107;
      color: #000;
      svg {
        color: #fff;
      }
    }
    .content {
      h2 {
        padding-top: 0.3rem;
      }
    }
    .logo {
      background-color: #000;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
      svg {
        color: #fff;
      }
    }
  }

  @media screen and (min-width: 280px) and (max-width: 1080px) {
    /* auto-fill 单元格大小确定而盒子大小不确定时，使用auto-fill尽可能多地填充盒子 */
    /* 网格布局提供了fr关键字 代表宽度的比例 2fr 为 1fr的两倍 */
    /* minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 */
    /* 下面代码表示 网格布局中 一列只能放置一个单元格 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    .analytic {
      &:nth-of-type(2),
      &:nth-of-type(4) {
        flex-direction: row-reverse;
      }
    }
  }
`
